<template>
  <div id="map">
    <el-amap
      ref="map"
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      :plugin="plugin"
      :events="events"
      class="amap-demo"
    >
      <!-- 地图标记 -->
      <el-amap-marker
        animation="AMAP_ANIMATION_BOUNCE"
        icon="https://oss.juchehulian.com/_platform/normal/3VgdZ31610419091.png"
        v-for="(marker, index) in markers"
        :events="marker.events"
        :position="marker.position"
        :key="index"
      ></el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
export default {
  data() {
    const that = this;
    return {
        lat:'',
        lng:'',
      zoom: 13,
      //定位成都中心位置
      center: [104.066177, 30.658499],
      events: {
        init: (o) => {
          //获取城市
          o.getCity((result) => {

          })
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {},
      },
      markers: [
        // 标记点位置
        {
          position: [104.29947294622, 30.684575631575],
          visible: true,
          draggable: false,
        },
      ],
      plugin: [
        'ToolBar',
        {
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(o) {
            },
          },
        },
      ],
    }
  },
  mounted() {
  },
  props:{
    //   选择地图的位置坐标信息
    mapData:{
        type:Object,
        default:()=>{
            return {}
        }
    }
  },
  watch:{
      //监听地图数据的变化
      mapData(val){
          let {lat,lng} = val
          this.markers[0].position = [lng,lat];
          this.center = [lng,lat]
          this.zoom = 17
      }
  }
}
</script>

<style scoped lang='scss'>
#map {
  .amap-demo {
    height: 265px;
  }
  .amap-maptype-list {
    display: none !important;
  }
}
</style>
